
const handler={
    get(target,prop){
        console.log("劫持get()",prop);
        return Reflect.get(target,prop)
    },
    set(target,prop,val){
        console.log("劫持set()",prop,val);
        return Reflect.set(target,prop,val)
    },
    deleteProperty(target,prop){
        console.log("劫持delete",prop);
        return Reflect.deleteProperty(target,prop)
    }
}

function reactive (target){
    // 他是深响应的数据，如果他的值是对象，还应该执行一下代理对象
    if(target &&  typeof target === "object"){
            Object.entries(target).forEach(([key,value])=>{
                if(typeof value === 'object'){
                    target[key] = reactive(value)
                }
            })
    }
    return new Proxy(target,handler)
}

function shallowReactive (target){
    return new Proxy(target,handler)
}



function ref(target){
// ref 中如果定义的是一个对象类型的数据，会将他转换成一个reactive类型的值
    if(target && typeof target === "object"){
        target = reactive(target)
    }

    // ref 里面设置的不是对象的情况
    return{
        _value:target,
        get value(){
            console.log("获取ref",this._value);
            return this._value
        },
        set value(val){
            console.log("设置ref",val);
            this._value = val
        }
    }
}

const str = ref("abc")
str.value = "hello"

const obj =ref( {
    a:1,    
    b:{
        c:2
    }
})

// shallowRef 实现
function shallowRef(target){    
        // ref 里面设置的不是对象的情况
        return{
            _value:target,
            get value(){
                console.log("获取ref",this._value);
                return this._value
            },
            set value(val){
                console.log("设置ref",val);
                this._value = val
            }
        }
    }